<template>
	<view class="available">
		<u-navbar :bgColor="bgColor" title="本栋房源" :titleStyle="titleStyle" leftIconColor="#ffffff"
			@leftClick="leftClick"></u-navbar>
		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view>

		<!-- 
			<view class="tabs">
				<view class="tabsitem" @click="handleTabs(0)">
					<view class="tabsitemtext" :class="{texted: currIndex ==0}">
						房间列表
					</view>
					<view  v-if="currIndex ==0"  class="H" ></view>
				</view>
				
				<view class="tabsitem"  @click="handleTabs(1)">
					<view class="tabsitemtext" :class="{texted: currIndex ==1}">
						房间号
					</view>
					<view v-if="currIndex ==1" class="H" ></view>
				</view>
				
			</view> -->

		<view v-if="dataList.length>0" class="dataItembox">
			<view v-if="loginbtn == true" class="dataItem" v-for="(item,index) in dataList" :key="index"
				@click="handleDetail(item.id)">
				<view class="dataItemLft">
					<image class="refreshimg" :src="item.image" mode="aspectFill"
						style="width: 290rpx; height: 240rpx;border-radius: 20rpx;">
					</image>
				</view>
				<view class="dataItemRight">
					<view class="name">
						{{item.name}}
					</view>
					<view class="distanceBox">
						<view class="distance">
							<view class="">
								<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
							</view>
							<view v-if="item.remark" class="">
								{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
							</view>
						</view>
						<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
							{{item.distance}}km
						</view>
					</view>
					<view class="advantage">

						<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
							{{subitem.name}}
						</view>
					</view>
					<view class="expense">
						<view v-if="item.price !='0.00'" class="expenseitem">
							{{item.price}}元/月
						</view>
						<view v-else class="expenseitem">
							致电询价
						</view>
						<view class="collect">
							{{item.collect}}收藏
						</view>

					</view>

				</view>
			</view>

			<button v-if="loginbtn == false" v-for="(item,index) in dataList" :key="index" class="box_phone_yes"
				open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<view class="dataItem" @click="handleDetail(item.id)">
					<view class="dataItemLft">
						<image class="refreshimg" :src="item.image" mode="aspectFill"
							style="width: 290rpx; height: 240rpx;border-radius: 20rpx">
						</image>
					</view>
					<view class="dataItemRight">
						<view class="name">
							{{item.name}}
						</view>
						<view class="distanceBox">
							<view class="distance">
								<view class="">
									<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
								</view>
								<view v-if="item.remark" class="">
									{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
								</view>
							</view>
							<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
								{{item.distance}}km
							</view>
						</view>

						<scroll-view class="advantage" scroll-x="true">
							<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
								{{subitem.name}}
							</view>
						</scroll-view>
						<view class="expense">
							<view v-if="item.price !='0.00'" class="expenseitem">
								{{item.price}}元/月
							</view>
							<view v-else class="expenseitem">
								致电询价
							</view>
							<view class="collect">
								{{item.collect}}收藏
							</view>
						</view>
					</view>
				</view>
			</button>



			<view class="desctext">
				有合适的吗？可以左上角返回上一层浏览更多房源哦
			</view>
		</view>

		<view v-else class="empty-sty">
			<u-empty mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png" text="暂无本栋房源，左上角返回主界面查看更多房源">
			</u-empty>
		</view>


		<view class="" style="height: 50rpx;"></view>


	</view>
</template>

<script>
	import {
		houseList,
		houseArea,
		obtain_city,
		positioning,
		house_list,
		obtainMobile
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				currIndex: 0,
				dataList: [],
				pageNum: 1,
				pageId: "",
				flag: null,
				city: "",
				house_latitude: "",
				house_longitude: "",
				loginbtn: false,
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('token')) {
				this.loginbtn = true
				if (options.scene) {
					this.getHouseList(options.scene)
					this.pageId = options.scene
					this.flag = true
				} else {
					this.getHouseList(options.id)
					this.pageId = options.id
					this.flag = false
				}
			} else {
				//没登陆的情况下肯定是分享进来的
				this.loginbtn = false
				this.pageId = options.scene
				this.flag = true
				this.siteGzh()
			}


			this.getNavbarHeight()
		},
		onReachBottom() {
			this.pageNum++;
			this.getHouseList(this.pageId);
		},
		methods: {
			async getHouseList(id) {
				console.log("登录")
				let res = await houseList({
					position: "1",
					page: this.pageNum,
					page_size: 5,
					building_id: id,
				})
				// console.log("本栋房源", res)
				if (res.code == 1000) {
					if (res.data.data.length > 0) {
						this.dataList = this.dataList.concat(res.data.data)
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}
				}
			},
			async handlegetHouse_List(id) {
				console.log("000000", this.dataList)
				console.log("未登录")
				let res = await house_list({
					position: "1",
					page: this.pageNum,
					page_size: 5,
					building_id: this.pageId,
					// city: this.city,
					// longitude: this.house_longitude,
					// latitude: this.house_latitude,
					city: "深圳市",
					longitude: "114.057939",
					latitude: "22.543527",
				})
				// console.log("本栋房源", res)
				if (res.code == 1000) {
					console.log("000000", this.dataList)
					if (res.data.data.length > 0) {
						console.log("11111111", this.dataList)
						res.data.data.forEach((item, index) => {
							this.dataList.push(item)
						})
						console.log("2222222", this.dataList)

						// this.dataList = this.dataList.concat(res.data.data)
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}
				}
			},

			handleDetail(id) {
				uni.navigateTo({
					// url: "../home/homedetail"
					url: `../home/homedetail?id=${id}`
				})
			},

			handleTabs(index) {
				this.currIndex = index
			},

			leftClick() {
				if (this.flag) {
					uni.reLaunch({
						url: "/pages/home/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},

			// 获取定位、
			siteGzh() {
				const that = this
				uni.getFuzzyLocation({
					type: 'wgs84',
					success: async function(res) {
						console.log("当前位置信息", res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.house_latitude = res.latitude
						that.house_longitude = res.longitude
						let positions = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						uni.setStorageSync('positions', positions)

						let subres = await obtain_city({
							longitude: res.longitude,
							latitude: res.latitude
						})
						if (subres.code == 1000) {
							that.city = subres.data
							uni.setStorageSync("location", that.city)
							that.handlegetHouse_List()
							let cityres = await houseArea({
								city: that.city
							})
							uni.setStorageSync("areaList", cityres.data)
						}

					},
					fail(e) {
						console.log("eeeeeeeee", e)
					}
				});
			},
			async getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let data = {
							code: that.logincode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						let res = await obtainMobile(data)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							uni.redirectTo({
								url: `/pages/housingresource/available?scene=${this.pageId}`
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})

			},

		}
	}
</script>

<style scoped lang="scss">
	.box_phone_yes {
		background-color: transparent;
		border: none;
		width: 690rpx;
		padding: 0;
		text-align: left;
	}

	.box_phone_yes:after {
		border: none;
	}

	.desctext {
		font-size: 25rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.available {
		.tabs {
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			display: flex;

			.tabsitem {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;

				.H {
					width: 40rpx;
					height: 6rpx;
					background: #F8AD22;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					opacity: 1;


				}

				.texted {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F8AD22;
					// line-height: 38rpx;
				}
			}
		}

		.dataItembox {
			width: 690rpx;
			margin: 30rpx auto;
		}

		.dataItem {
			display: flex;
			width: 690rpx;
			padding: 10rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;

			.dataItemLft {
				margin-right: 20rpx;
			}

			.dataItemRight {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.name {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 33rpx;

				}

				.distanceBox {
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 26rpx;
					display: flex;
					justify-content: space-between;

					.metro {
						width: 200rpx;
					}

				}

				.advantage {
					display: flex;

					.advantageitem {
						width: 84rpx;
						padding: 5rpx 15rpx;
						height: 40rpx;
						background: #FFF5E1;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #F06703;
						line-height: 40rpx;
						text-align: center;
						margin-right: 10rpx;
					}
				}

				.expense {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.expenseitem {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #F23A00;
						line-height: 35rpx;
					}

					.collect {
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #F8AD22;
						line-height: 26rpx;
					}
				}
			}
		}
	}
</style>